<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>App列表</span>
    </div>
    <div>
      <div v-if="null===app||app.length===0">
        <h2>暂无app</h2>
      </div>
      <div v-else v-for="item in app" >
        <el-card style="text-align: left;margin-top: 3%">
          <h1 style="margin-left: 48%">{{ item.app.appName }}</h1>
          <div style="height: 100%;width: auto;margin-top: 2%;margin-left: 45%">
            <el-button type="primary" v-on:click="appDetails(item.app.appId)">详情</el-button>
            <el-button v-if="item.is_binding === 1" type="danger" disabled>已加入</el-button>
            <el-button v-else type="primary" v-on:click="binding(item.app.appId)">加入</el-button>
          </div>
        </el-card>
      </div>
    </div>
  </el-card>
</template>
<script>
  import BindingApp from '../message/BindingApp'

  export default {
    mounted: function () {
      this.getApp();
    },
    name: 'AgentAppList',
    data() {
      return {
        app: []
      }
    },
    components: {
      "v-form": BindingApp
    },
    methods: {
      getApp() {
        let that = this
        this.$axios.get("/api/app/all/only_name").then(successResponse => {
          that.app = successResponse.data
          console.log(that.app)
        }).catch(failResponse => {
        })
      },
      appDetails(appId) {
        this.$router.push({path: '/app/details', query: {id: appId}})
      },
      binding(appId) {
        this.$msgbox({
          message: <v-form ref="BindingApp"></v-form>,
          showCancelButton: true,
          confirmButtonText: '绑定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              instance.confirmButtonLoading = true;
              instance.confirmButtonText = '执行中...';
              setTimeout(() => {
                done();
                setTimeout(() => {
                  instance.confirmButtonLoading = false;
                }, 30);
              }, 300);
            } else {
              done();
            }
          }
        }).then(action => {
          this.$refs.BindingApp.binding(appId)
          location.reload()
        }).catch(msg => {
          if (msg == "cancel") {
            this.$refs.BindingApp.resetForm()
            this.$message.info("已取消")
          } else {
            this.$message.error(msg)
          }
        });
      }
    }
  }
</script>
<style>
  .box-card {
    width: 100%;
  }
</style>
